<template>
  <div id="resource-number-search">
    <!-- 资源编号input搜索 -->
    <div class="top">
      <div class="top-search">
        <span class="content">资源类型</span>
        <el-select v-model="searchValue.resourceType" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="top-search">
        <span class="content">房客类型</span>
        <el-select v-model="searchValue.partment" placeholder="全部">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="top-search">
        <span class="content">户型</span>
        <el-select v-model="searchValue.apartment" placeholder="区间选择">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="top-search">
        <span class="content">楼层</span>
        <el-select v-model="searchValue.floor" placeholder="区间选择">
          <el-option
            v-for="item in options4"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="top-search">
        <span class="content">面积</span>
        <el-select v-model="searchValue.acreage" placeholder="区间选择">
          <el-option
            v-for="item in options5"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="top-search mr0">
        <span class="content">价格</span>
        <el-select v-model="searchValue.priceRange" placeholder="区间选择">
          <el-option
            v-for="item in options6"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select v-model="searchValue.price" placeholder="万元">
          <el-option
            v-for="item in options7"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>
    <div class="bottom">
      <span class="content">时间</span>
      <el-date-picker
        v-model="date"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        unlink-panels
        :default-time="['00:00:00', '23:59:59']"
      ></el-date-picker>
      <el-button type="primary" size="mini">查询</el-button>
      <el-button size="mini" class="reset" @click="resetValue">重置</el-button>
    </div>
    <div class="searchInput">
      <el-input v-model="search" placeholder="输入小区名称/需求区域/资源编号/姓名" class="search"></el-input>
      <i class="iconfont icon-sousuo"></i>
      <el-button type="primary" size="mini">导出Excel</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchValue: {
        resourceType: null, // 资源类型
        tenantType: null, // 房客类型
        apartment: null, // 户型
        floor: null, // 楼层
        acreage: null, // 面积
        priceRange: null, // 价格
        price: null // 万元
      },
      date: null, // 时间
      search: null, // 精确查找输入框
      options1: [
        {
          value: null,
          label: '请选择'
        },
        {
          value: 1,
          label: '房源'
        },
        {
          value: -1,
          label: '客源'
        }
      ],
      options2: [
        {
          value: null,
          label: '全部'
        },
        {
          value: 1,
          label: '买卖'
        },
        {
          value: -1,
          label: '租赁'
        }
      ],
      options3: [
        {
          value: null,
          label: '区间选择'
        }
      ],
      options4: [
        {
          value: null,
          label: '区间选择'
        }
      ],
      options5: [
        {
          value: null,
          label: '区间选择'
        }
      ],
      options6: [
        {
          value: null,
          label: '区间选择'
        }
      ],
      options7: [
        {
          value: null,
          label: '万元'
        },
        {
          value: 1,
          label: '千元'
        },
        {
          value: -1,
          label: '百元'
        }
      ]
    }
  },
  methods: {
    /**
     * @author 王磊
     * @information 重置输入框内容
     * @date 2019-1-17
     * @param {*} resetValue 清空输入框内容
     */
    resetValue () {
      let searchValue = {
        'resourceType': null,
        'tenantType': null,
        'apartment': null,
        'floor': null,
        'acreage': null,
        'priceRange': null,
        'price': null
      }
      this.search = null
      this.date = null
      this.searchValue = searchValue
    }
  }
}
</script>

<style>
</style>
